<template>
  <div class="app">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设备基本信息初始化</span>
      </div>
      <div>
        <el-table
          v-loading="listLoading"
          :data="tableData"
          stripe
          height="550"
          style="width: 100%;font-size:12px;"
        >
          <el-table-column align="center" prop="id" label="设备序列号" />
          <el-table-column align="center" prop="stageName" label="工段名称">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.stageName" placeholder="请选择工段名称">
                <el-option v-for="item in stageList" :key="item" :label="item" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="工序名称">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.stageName" placeholder="请选择工序名称">
                <el-option v-for="item in stageList" :key="item" :label="item" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="设备名称" />
          <el-table-column align="center" prop="order" label="设备编号" />
          <el-table-column align="center" prop="x" label="设备功率（KW/h）" />
          <el-table-column align="center" prop="h" label="每日岗位工时(h)" />
          <el-table-column align="center" prop="num" label="岗位人数" />
          <el-table-column align="center" prop="equipmentProcess" label="责任人" width="130" />
          <el-table-column align="center" prop="jobStandards" label="岗位标准" />
          <el-table-column align="center" prop="date" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" round plain size="mini" @click="chang(scope.row)">保存</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog title="修改" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="fromData" size="mini">
        <el-form-item label="工序名称:" :label-width="formLabelWidth">
          <el-select v-model="fromData.deviceCode" placeholder="请选择工序名称" @change="changProcessList">
            <el-option v-for="item in deviceCodeList" :key="item" :label="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称:" :label-width="formLabelWidth">
          <el-select v-model="fromData.deviceName" placeholder="请选择设备名称" @change="changDeviceName">
            <el-option
              v-for="item in deviceNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号:" :label-width="formLabelWidth">
          <el-select
            v-model="fromData.deviceCode"
            placeholder="请选择设备编号"
            :disabled="fromData.deviceName==''"
          >
            <el-option v-for="item in deviceCodeList" :key="item" :label="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位人数:" :label-width="formLabelWidth">
          <el-input v-model="fromData.peopleNum" autocomplete="off" style="width:185px" />&nbsp;&nbsp;人
        </el-form-item>
        <el-form-item label="工序工时定额:" :label-width="formLabelWidth">
          <el-input v-model="fromData.h" autocomplete="off" style="width:185px" />&nbsp;&nbsp;小时
        </el-form-item>
        <el-form-item label="岗位标准:" :label-width="formLabelWidth">
          <el-input
            v-model="fromData.jobStandards"
            rows="4"
            type="textarea"
            autocomplete="off"
            style="width:185px"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" size="mini" round @click="save">保 存</el-button>
        <el-button size="mini" round @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getList,
  edit,
  getDeviceName,
  getDeviceCode,
  getProcessList,
  getStageList
} from "@/api/initDevice";

export default {
  name: "InitDevice",
  data() {
    return {
      tableData: [],
      listLoading: true,
      dialogFormVisible: false,
      fromData: {
        id: "",
        name: "",
        deviceName: "",
        deviceCode: "",
        h: "",
        peopleNum: "",
        jobStandards: "",
        stageId: "",
        stageName: "1"
      },
      formLabelWidth: "140px",
      deviceNameList: {},
      deviceCodeList: {},
      processList: {},
      stageList: {}
    };
  },
  computed: {
    ...mapGetters(["name"])
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    save() {
      edit(this.fromData).then(response => {
        if (response.success) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(response.message);
        }
      });
    },
    changDeviceName() {
      getDeviceCode({ id: this.fromData.deviceName }).then(response => {
        this.deviceCodeList = response.data.list;
      });
    },
    changProcessList(stageId) {
      getProcessList({ id: stageId }).then(response => {
        console.log("【工序列表：】", this.processList);
        this.processList = response.data.list;
      });
    },
    chang(val) {
      this.fromData.name = val.name;
      this.fromData.id = val.id;
      this.dialogFormVisible = true;
      this.changProcessList(val.id);
    },
    statusbColor(val) {
      if (val === "等待") {
        return "color:#ccc";
      }
      if (val === "故障") {
        return "color:red";
      }
      if (val === "正在运行") {
        return "color:#4CA666";
      }
    },
    initData() {
      this.listLoading = true;
      getList().then(response => {
        this.tableData = response.data.list;
        this.listLoading = false;
      });
      getDeviceName().then(response => {
        this.deviceNameList = response.data.list;
        this.listLoading = false;
      });
      getStageList().then(response => {
        this.stageList = response.data.list;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app {
  font-size: 12px;
  padding: 45px 45px 0 45px;
}
/deep/ .el-card__header {
  padding: 10px 20px;
  span {
    margin: 5px 0;
    float: left;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    padding-left: 10px;
    border-left: #2b99fa solid 2px;
  }
  a {
    line-height: 22px;
  }
}
/deep/ .el-card__body {
  padding: 20px 10px;
}
/deep/ .el-dialog {
  border-radius: 5px;
}
/deep/ .el-dialog__footer {
  background: #f7f7f7;
  border-radius: 0 0 5px 5px;
}
.echarts-div {
  width: 100%;
  height: 170px;
  margin: 0 auto;
}
</style>
